<template>
  <view class="page">
    <view class="top">
      <view class="top-item" @click="returns">
        <image src="/static/ret.png" alt="" />
        <text>支付成功</text>
      </view>
    </view>

    <view class="success">
      <image style="width: 100px;height: 100px;margin-top: 20px;" src="https://img.xiaopiu.com/userImages/img18275718ada7c6cb0.png" alt="" />
      <view style="margin-top: 20px;">支付成功</view>
    </view>

    <view class="mess">
      <view class="mes">挂号信息</view>
      <view class="money">
        <view class="money-left">挂号费</view>
        <view class="money-right">100.00</view>
      </view>
      <view class="money">
        <view class="name-left">就诊人</view>
        <view v-if="patientName" class="name-right">{{ patientName }}</view>
        <view v-else class="name-right">未知</view>
      </view>
      <view class="money">
        <view class="name-left">就诊科室</view>
        <view class="hourse-right">内科</view>
      </view>
     <!-- <view class="money">
        <view class="name-left">就诊日期</view>
        <view v-if="currentDate" class="date-right">{{ currentDate }}</view>
      </view> -->
      <view class="money">
        <view class="name-left">就诊时间</view>
        <view class="date-right">上午9：00-10：00</view>
      </view>
      <view class="money">
        <view class="name-left">就诊地点</view>
        <view class="date-right">门诊楼一层201</view>
      </view>
    </view>

    <view class="over" @click="ok">完成</view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'

// 存储当前日期
const currentDate = ref('')

// 存储患者名称
const patientName = ref('')

// 设置患者名称和日期
onMounted(() => {
  // 从本地存储获取患者名称
  const patientData = uni.getStorageSync('patientName');
  if (patientData) {
    patientName.value = patientData;
    console.log('读取就诊人姓名:', patientName.value);
  } else {
    console.log('未找到就诊人姓名');
  }

  // 设置当前日期
  const currentDateTime = new Date().toISOString().split('T')[0];
  currentDate.value = currentDateTime;
});

// 返回上一页
const returns = () => {
   uni.navigateTo({
    url:'/pages/sure/sure'
   })
}

// 完成后处理
const ok = () => {
  const newData = {
    department: '内科',
    amount: '￥20.00',
    time: currentDate.value,
  }

  // 跳转到记录页面
  uni.navigateTo({
    url: '/pages/home/home'
  })
}
</script>

<style scoped>
.page {
  background-color: #f4f4f4;
  padding-bottom: 40px;
}

.top {
  background-color: #00daca;
  width: 100%;
  height: 5rem;
  color: white;
  font-size: 21px;
  line-height: 3rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  padding-left: 15px;
}

.top-item {
  display: flex;
  align-items: center;
  margin-top: 30px;
}

.top-item image {
  width: 16px;
  height: 16px;
  margin-right: 10px;
}

.success {
  width: 100%;
  height: 190px;
  background-color: white;
  text-align: center;
  margin-top: 20px;
}

.success text {
  margin-top: 10px;
  color: #838383;
}

.mess {
  width: 100%;
  background-color: white;
  margin-top: 15px;
  padding: 15px;
}

.mes {
  font-size: 18px;
  font-weight: bold;
}

.money {
  display: flex;
  justify-content: space-between;
  margin-top: 15px;
  color: #838383;
  font-size: 16px;
  width: 92%;
}

.money-left {
  flex: 1;
}

.money-right,
.name-right,
.hourse-right,
.date-right {
  text-align: right;
  flex-shrink: 0;  /* 防止右侧内容被挤压 */
  white-space: nowrap;  /* 防止文本换行 */
  overflow: hidden;
  text-overflow: ellipsis;  /* 超出时显示省略号 */
}

.over {
  width: 92%;
  margin-left: 4%;
  background-color: #00daca;
  height: 45px;
  position: absolute;
  bottom: 35px;
  border-radius: 30px;
  text-align: center;
  color: white;
  line-height: 45px;
  font-size: 18px;
}

</style>